Flutter - Get started

Set up an editor

（VSCodeの設定を行う）

Test drive

Create the app

$ flutter create my_app

$ cd my_app

Run the app

対応デバイスを確認

$ flutter devices

2 connected devices:

macOS (desktop) • macos • darwin-x64 • macOS 11.6.8 20G730 darwin-x64

Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.101

アプリを起動

$ cd my_app

$ flutter run

Chromeが起動し以下の画面が表示される

https://gyazo.com/e3851c787cb0d5d75ce0ed3796576a26

Try hot reload

(1) lib/main.dart 内のラベルのテキストを適当に修正

pushed → clicked

→ Flutter app がホットリロードされる

Profile or release runs

高速化のためのプロファイリングやリリースビルドを作成したい場合は、ビルドモードを「profile」から「release」に変更する

Wirte your first Flutter app, part 1

Step 1: Create the starter Flutter app

$ cd ~/src

$ flutter create startup_namer

$ cd startup_namer

$ flutter run

code:lib/main.dart

// Copyright 2018 The Flutter team. All rights reserved.

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Welcome to Flutter',

home: Scaffold(

appBar: AppBar(

title: const Text('Welcome to Flutter'),

),

body: const Center(

child: Text('Hello World'),

),

),

);

}

}

Observation

MyAppはStatelessWidgetのサブクラス

Scaffoldウィジェット、デフォルトapp barとbodyを提供

ウィジェットの主な仕事は build() メソッドを提供すること。ここで描画を行う

Step 2: Use an external package

$ flutter pub add english_words

$ flutter pub get

code:diff

diff --git a/pubspec.lock b/pubspec.lock

index 7bc8bdd..c05f573 100644

--- a/pubspec.lock

+++ b/pubspec.lock

@@ -50,6 +50,13 @@ packages:

source: hosted

version: "1.0.5"

+ english_words:

+ dependency: "direct main"

+ description:

+ name: english_words

+ source: hosted

+ version: "4.0.0"

fake_async:

dependency: transitive

description:

diff --git a/pubspec.yaml b/pubspec.yaml

index 52ff25d..41a8336 100644

--- a/pubspec.yaml

+++ b/pubspec.yaml

@@ -34,6 +34,7 @@ dependencies:

# The following adds the Cupertino Icons font to your application.

# Use with the CupertinoIcons class for iOS style icons.

cupertino_icons: ^1.0.2

+ english_words: ^4.0.0

import new package

code:lib/main.dart

+import 'package:english_words/english_words.dart';

import 'package:flutter/material.dart';

Use the English words package to generate the text instead of using the string “Hello World”:

code:lib/main.dart

--- a/lib/main.dart

+++ b/lib/main.dart

@@ -2,6 +2,7 @@

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

+import 'package:english_words/english_words.dart';

import 'package:flutter/material.dart';

void main() {

@@ -13,14 +14,15 @@ class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

+ final wordPair = WordPair.random();

return MaterialApp(

title: 'Welcome to Flutter',

home: Scaffold(

appBar: AppBar(

title: const Text('Welcome to Flutter'),

),

- body: const Center(

- child: Text('Hello World'),

+ body: Center(

+ child: Text(wordPair.asPascalCase),

),

),

);

ランダムのワードが表示される

https://gyazo.com/88af946d07b8fac174ed18e442f91908

Step 3: Add a Stateful widget

ステートフルウィジェットはライフタイム中に変更がはいるステートを管理する

StatefulWidgetクラスはStateクラスのインスタンスを作る

StatefulWidgetはイミュータブルで破棄と再生成が行われるが、Stateクラスはウィジェットのライフタイム中に保存される

1. Create the boilerplate code for a stateful widget.

class MyWidget extends StatefulWidget

class _MyWidgetState extends State<MyWidget>

2. （以下、なんかいろいろ）

code:lib/main.dart.diff

diff --git a/lib/main.dart b/lib/main.dart

index a0d16aa..3aea0eb 100644

--- a/lib/main.dart

+++ b/lib/main.dart

@@ -21,10 +21,25 @@ class MyApp extends StatelessWidget {

appBar: AppBar(

title: const Text('Welcome to Flutter'),

),

- body: Center(

- child: Text(wordPair.asPascalCase),

+ body: const Center(

+ child: RandomWords(),

),

),

);

}

}

+

+class RandomWords extends StatefulWidget {

+ const RandomWords({Key? key}) : super(key: key);

+

+ @override

+ State<RandomWords> createState() => _RandomWordsState();

+}

+

+class _RandomWordsState extends State<RandomWords> {

+ @override

+ Widget build(BuildContext context) {

+ final wordPair = WordPair.random();

+ return Text(wordPair.asPascalCase);

+ }

+}

Step 4: Create an infinite scrolling ListView

code:lib/main.dart.diff

diff --git a/lib/main.dart b/lib/main.dart

index 3aea0eb..942875d 100644

--- a/lib/main.dart

+++ b/lib/main.dart

@@ -16,10 +16,10 @@ class MyApp extends StatelessWidget {

Widget build(BuildContext context) {

final wordPair = WordPair.random();

return MaterialApp(

- title: 'Welcome to Flutter',

+ title: 'Startup Name Generator',

home: Scaffold(

appBar: AppBar(

- title: const Text('Welcome to Flutter'),

+ title: const Text('Startup Name Generator'),

),

body: const Center(

child: RandomWords(),

@@ -37,9 +37,27 @@ class RandomWords extends StatefulWidget {

}

class _RandomWordsState extends State<RandomWords> {

+ final _suggestions = <WordPair>[];

+ final _biggerFont = const TextStyle(fontSize: 18);

+

@override

Widget build(BuildContext context) {

- final wordPair = WordPair.random();

- return Text(wordPair.asPascalCase);

+ return ListView.builder(

+ padding: const EdgeInsets.all(16.0),

+ itemBuilder: /*1*/ (context, i) {

+ if (i.isOdd) return const Divider(); /*2*/

+

+ final index = i ~/ 2; /*3*/

+ if (index >= _suggestions.length) {

+ _suggestions.addAll(generateWordPairs().take(10)); /*4*/

+ }

+ return ListTile(

+ title: Text(

+ style: _biggerFont,

+ ),

+ );

+ },

+ );

}

}

Next steps

If you would like to extend this app, proceed to part 2 on the Google Developers Codelabs site

Google Developers Codelabs

Write Your First Flutter App, part 2

5. Learn more

Flutter basics

Introduction to widgets

Building layouts tutorial

Add interactivity tutorial

Flutter for iOS developers

Flutter for web developers